<template>
	<view class="page-container bg-grey">
		<up-navbar safeAreaInsetTop fixed bgColor="transparent" :autoBack="true"></up-navbar>
		<image :src="imgBaseUrl + 'group-banner.png'" class="group-banner" />
		<view class="pb-fixed-bottom plr-24">
			<view class="form-group zjy-card-form">
				<view class="zjy-card-title label">填写申请信息</view>
				<zjy-form-item title="团队名称" type="input" :value="groupName" />
				<zjy-form-item title="团队宣言" type="input" :value="groupSlogan" />
				<zjy-form-item title="团队头像" pb="0" :noBorder="true">
					<template #value>
						<view class="flex-j-end">
							<zjy-upload v-model="groupAvatar" :maxCount="1" :maxSize="20 * 1024 * 1024">
								<view class="flex">
									<image :src="imgBaseUrl + 'upload-img.png'" class="icon-64" />
								</view>
							</zjy-upload>
						</view>
					</template>
				</zjy-form-item>
			</view>
			<view class="zjy-card-form mt-24 mb-48">
				<view class="zjy-card-title label">推广说明</view>
				<view class="mt-32">
					此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明此处为富文本推广说明
				</view>
			</view>
		</view>
		<view class="bottom-fixed-wrap">
			<view class="flex-1">
				<zjy-button @click="navigateTo('/pages/common/res')">申请创建团队</zjy-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { navigateTo } from "@/utils/page-redirect"

const imgBaseUrl = inject("imgBaseUrl")

const groupName = ref("")
const groupSlogan = ref("")
const groupAvatar = ref("")
</script>
<style lang="scss" scoped>
.group-banner {
	width: 100%;
	height: 872rpx;
}
.form-group {
	position: relative;
	margin-top: -120rpx;
	background: linear-gradient(0deg, $c-white 74%, rgba(255, 255, 255, 0.8) 100%);
	border-radius: 16rpx;
	border: 4rpx solid $c-white;
	backdrop-filter: blur(30px);
}
</style>
